<template>
  <div>
    <header class="header">
      <navbar>
        {{ `${coinPair.stock}/${coinPair.money}` }}
        <span class="favorate" @click="handleFavorite(coinPair.status)">
          <i v-if="loggedIn && coinPair.status === 1" class="iconfont icon-favorate-active"></i>
          <i v-else class="iconfont icon-favorate"></i>
        </span>
      </navbar>
    </header>
    <kline-total-price />
    <kline-chart />
    <!--K线图-->
    <div class="tabPanel k-bottom">
      <div class="tabtitle">
        <li
          v-for="(item, index) in tabList"
          :key="item.text"
          :class="{ hit: item.active }"
          @click="handleClick(index)"
        >
          {{ $t(item.text) }}
        </li>
      </div>
      <div class="panes">
        <kline-handicap v-if="activeIndex === 0" />
        <kline-latest-deals v-if="activeIndex === 1" />
      </div>
    </div>
    <div class="k-caozuo">
      <nuxt-link :to="`/exchange?symbol=${symbol}&tab=0`" clsss="mairu">{{ $t('买入') }}</nuxt-link>
      <nuxt-link :to="`/exchange?symbol=${symbol}&tab=1`" class="maichu">{{ $t('卖出') }}</nuxt-link>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import { SET_SYMBOL } from '@/constants/mutation-types'
import navbar from '@/components/partials/kline/Navbar'
import klineTotalPrice from '@/components/partials/kline/TotalPrice.vue'
import klineChart from '@/components/partials/kline/KlineChart.vue'
import klineHandicap from '@/components/partials/kline/Handicap.vue'
import klineLatestDeals from '@/components/partials/kline/LatestDeals'
export default {
  components: { klineTotalPrice, klineChart, klineHandicap, klineLatestDeals, navbar },
  fetch ({ store, route }) {
    const symbol = route.query.symbol
    if (symbol) {
      store.commit(`exchange/${SET_SYMBOL}`, symbol)
    }
  },
  data () {
    return {
      tabList: [
        {
          text: '盘口',
          active: true
        },
        {
          text: '最新成交',
          active: false
        }
      ],
      activeIndex: 0
    }
  },
  computed: {
    ...mapState({
      loggedIn: ({ auth }) => auth.loggedIn,
      symbol: ({ exchange }) => exchange.symbol
    }),
    ...mapGetters({
      coinPair: 'market/coinPair'
    })
  },
  methods: {
    ...mapActions({
      addSelf: 'market/addSelf',
      cancelSelf: 'market/cancelSelf'
    }),
    handleClick (index) {
      this.tabList[this.activeIndex].active = false
      this.tabList[index].active = true
      this.activeIndex = index
    },
    handleBack () {
      this.$router.back()
    },
    handleFavorite (status) {
      if (!this.loggedIn) {
        this.$router.push('/login')
        return
      }
      const { stock, money } = this.coinPair
      if (status === 1) {
        // 取消自选
        this.cancelSelf({ stock, money })
      } else {
        // 添加自选
        this.addSelf({ stock, money })
      }
    }
  },
  head () {
    return {
      title: this.symbol
    }
  }
}
</script>
<style scoped>
.header {
  padding-top: 60px;
}
.tabPanel {
  background-color: #171e31;
}
.k-bottom .tabtitle {
  display: flex;
  border-bottom: 1px solid #000;
}
.tabtitle li {
  flex: 1;
  color: #929db1;
  margin: 0;
  font-size: 16px;
}
.k-bottom .hit {
  color: #0383e8;
  border: none;
}
.k-bottom .pane {
    background-color: #171e31;
}
.favorate {
  position: absolute;
  right: 0px;
  padding-left: 20px;
  padding-right: 20px;
}
.favorate .icon-favorate {
  font-size: 20px;
  color: gray;
}
.favorate .icon-favorate-active {
  font-size: 20px;
  color: orange;
}
</style>
